<template>
	<view class="cart-shop">
		<!-- 分类列表 -->
		<view class="side-a">
			<scroll-view :scroll-y="true" style="height: 100%" :scroll-top="scrollTop" :scroll-with-animation="true">
				<view class="item text-ellipsis__2 side-item" v-for="(item,index) in shopdata.categories" :key="index"
					@click="handleSideAction(index)" :class="[index===sideCurrentIndex&&'type_active']">
					{{ i18nLocale=='ug'?item.ug_name:item.cn_name }}
				</view>
			</scroll-view>
		</view>
		<!-- 渲染产品列表 -->
		<view class="side-b">
			<view class="search">
				<view class="search-content" :dir="i18nLocale=='ug'?'rtl':''">
					<u-icon name="search" color="#999" size="24"></u-icon>
					<view class="input">
						<input type="text" @blur="changeblur" @focus="changefocus"
						@input="searchinput"
							:placeholder="$t('SearchPlaceholder')" v-model="keyword" placeholder-style="font-size:24rpx"
							:clearabled="false" />
					</view>
				</view>
			</view>
			<scroll-view id="side_b" scroll-y class="side-scroll" scroll-with-animation 
				:scroll-into-view="intoView" @scroll="contentScroll" :dir="i18nLocale=='ug'?'rtl':''"
				v-if="totalshop.find(item => item.id == shopdata.id )">
				<view :id="`v_${index}`"
					v-for="(item,index) in totalshop.find(item => item.id === shopdata.id ).categories" class="item_b"
					:key="item.id">
					<view class="item" v-for="(sub_item,sub_index) in item.products" :key="sub_item.id" v-if="search_id==sub_item.id || !keyword">
						<view class="img-box">
							<image :src="getImgSrc(sub_item.img)" class="img"></image>
						</view>
						<view class="goods-info">
							<view class="title">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>

							<view class="num">{{$t('Sold')}} : {{ sub_item.sold }}</view>
							<view class="price">
								<view>
									<text class="item-price">￥{{ sub_item.price }}</text>
									<text class="unit" >
										/{{ i18nLocale=='ug'?sub_item.unit.ug_name:sub_item.unit.cn_name}}
									</text>
								</view>

							</view>
						</view>
						<!-- 加减组件 -->
						<NumberCalculation :qty="sub_item.qty" :item="sub_item" :index="index" :shopid="shopdata.id">
						</NumberCalculation>
					</view>
				</view>
				<view class="" style="height:850rpx;width:100%;"></view>
			</scroll-view>
		</view>
		<ShopBar title="GoCheckout" bottom="5"></ShopBar>
	</view>
</template>

<script>
	import ShopBar from "./ShopBar.vue"
	import NumberCalculation from "./NumberCalculation.vue"
	export default {
		components: {
			ShopBar,
			NumberCalculation
		},
		//产品分类
		props: ['shopdata','shop_id'],
		data() {
			return {
				intoView: 'v_0',
				sideCurrentIndex: 0,
				scrollTop: 0,
				contentHeightArr: [],
				keyword: '',
				search_id:''
			}
		},
		computed: {
			totalshop() {
				return this.$store.state.shop.totalshop
			},
			keyboardflag() {
				return this.$store.state.keyboard;
			},
			i18nLocale() {
				return this.$i18n.locale;
			},

		},
		mounted() {
			
			this.getHeight('.item_b').then(res => {
				// res
				res.forEach((item, index) => {
					// console.log(item,'++++++++',res)
					let top = index > 0 ? this.contentHeightArr[index - 1] : 0;
					top += item.height;
					// console.log(top,'+++++++++++')
					this.contentHeightArr.push(top);
				})
			})
		},
		methods: {
			async getHeight(element) {
				return new Promise((resolve) => {
					let view = uni.createSelectorQuery().in(this).selectAll(element);
					view.boundingClientRect(data => {
						if (!data) {
							setTimeout(() => {
								this.getHeight()
							}, 10)
							return
						}
						resolve(data)
					}).exec();
				})
			},

			contentScroll(event) {
				// console.log(event.target.scrollTop,'+++++++++')
				let scrollTop = event.target.scrollTop
				let index = this.contentHeightArr.findIndex((item) => {
					return scrollTop <= item
				})

				this.sideCurrentIndex = index == -1 ? this.sideCurrentIndex : index
				this.scrollHeight()
			},
			handleSideAction(index) {
				
				this.sideCurrentIndex = index
				this.intoView = `v_${index}`
				this.scrollHeight()
			},
			async getWrapSideHeight() {
				return new Promise(resolve => {
					let view = uni.createSelectorQuery().in(this).select(".side-a");
					view.boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},
			async scrollTopTo(OffsetHeight, itemTab) {
				let tabNav = await this.getWrapSideHeight()

				this.scrollTop = OffsetHeight - (tabNav.height - itemTab.height) / 2
			},
			async scrollHeight() {
				let tabs = await this.getHeight(".side-item")
				let itemTab = tabs[this.sideCurrentIndex]
				if (!itemTab) return

				let currentBeforeArr = tabs
					.slice(0, this.sideCurrentIndex)

				let OffsetHeight = currentBeforeArr
					.reduce((total, curr) => {
						return total + curr.height
					}, 0);
				
				this.scrollTopTo(OffsetHeight, itemTab)
			},
			// increase(symbol, item, index) {
			// 	console.log(symbol, item, index)
			// 	this.$store.commit('setTotalprice', {
			// 		symbol: symbol,
			// 		item: item,
			// 		index: index
			// 	})
			// },
			//点击搜搜框
			changeblur() {
				this.$store.commit('setKeyboard', false);
			},
			//搜搜框输入
			changefocus() {
				this.$store.commit('setKeyboard', true);
			},
			// 搜索
			searchinput(e){
				let value=e.detail.value;
				let that=this;
				let id=this.shop_id;
				this.$store.state.shop.totalshop.map(item=>{
					if(id==item.id){
						for(let i=0;i<item.categories.length;i++){
							for(let j=0;j<item.categories[i].products.length;j++){
								if(item.categories[i].products[j].ug_name.includes(value) || item.categories[i].products[j].cn_name.includes(value)){
									this.search_id=item.categories[i].products[j].id;
									
								}
								
							}
						}
					}
				})
				
			}
		}
	}
</script>


<style lang="scss" scoped>
	.cart-shop {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		overflow: hidden;

	}

	.side-scroll {
		width:100%;
		height:100%;
		position: relative;
	

	}

	.side_b_title {
		position: sticky;
		top: -2rpx;
		left: 0;
		z-index: 99;
		padding: 10rpx 24rpx;


	}

	.side-a {
		width: 20%;
		box-sizing: border-box;
		height: 100%;
		overflow: auto;
		background-color: $uni-bg-color-box;
		// box-shadow: $uni-bg-shadow;

		.item {
			text-align: center;
			padding: 30rpx 20rpx;
			display: flex;
			font-size: $uni-font-size-base;
			justify-content: center;
			align-items: center;
			color: $uni-color-title;
			font-weight: 600;
		}

		.type_active {
			background-color: #eeedf2;
			font-weight: 600;
			color: $uni-color-topic;
		}
	}

	.side-b {
		width: 80%;
		height:100%;
		box-sizing: border-box;
		padding: 0rpx $uni-spacing-padding-sm;
		background-color: $uni-bg-color-input;


		.goods {
			font-size: 26rpx;
		}

		.country {
			font-size: 22rpx;
			color: #999999;

		}

		.item {
			padding: $uni-spacing-padding-sm;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-base;
			box-shadow: $uni-bg-shadow;
			box-sizing: border-box;

			.img-box {
				width: 180rpx;
				height: 180rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0rpx 20rpx;

				view {
					padding: 7rpx 0rpx;
				}
			}

			.title {
				font-size: 26rpx;
				font-weight: bold;
			}

			.num {
				color: #999999;
				font-size: 28rpx;
			}

			.description {
				font-size: 22rpx;
				color: #666666;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				  white-space: nowrap;

				.item-price {
					font-size: 28rpx;
					padding-right: 10rpx;
				}

				.unit {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}

	.search {
		width: 100%;
		box-sizing: border-box;
		padding: $uni-spacing-margin-sm;

		.search-content {
			width: 100%;
			background-color: #fff;
			border-radius: $uni-border-radius-lg;
			color: $uni-color-title;
			display: flex;
			align-items: center;
			font-size: $uni-font-size-sm1;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			input {
				font-size: $uni-font-size-sm1;
			}
		}
	}
</style>